<template>
  <div class="lifeIndex">
    <header>
      <p class="backWrap"><img src="../../../../static/img/zuojiantou.png" alt="" class="back" @click="back"></p>
      <div class="address">
        <el-dropdown  @command="handleCommand" trigger="click" >
          <p class="el-dropdown-link">
            <span>{{city}}</span><i class="el-icon-arrow-down el-icon--right"></i>
          </p>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="陕西师范大学">陕西师范大学</el-dropdown-item>
            <el-dropdown-item command="西安交通大学">西安交通大学</el-dropdown-item>
            <el-dropdown-item command="西安音乐学院">西安音乐学院</el-dropdown-item>
            <el-dropdown-item command="西安财经">西安财经</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="search" @click="jump('search')">
        <img src="../../../../static/img/sousuo111.png" alt="">
        <span>大家都在说十周年2折起</span>
      </div>
    </header>
    <!--    轮播图-广告  -->
    <div class="index_lunbo">
      <div class="swiper-container" style="width: 100%;height:1.6rem;">
        <div class="swiper-wrapper" style="width: 100%;height:100%">
          <img v-for='el in lunbolist' class="swiper-slide index_swiper_listimg" :src="el.url">
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <!--   轮播图-功能  -->
    <div class="zw">
      <div class="index_lunbo index_lunbo2">
        <div class="swiper-container2" style="width: 3.45rem;height:1.31rem;overflow: hidden">
          <div class="swiper-wrapper" style="width: 3.45rem;height:1.31rem;">
            <div class="swiper-slide" >
              <div v-for="x in funList" class="lifeIconBox" @click="jump(x.page)">
                <img :src="x.src" alt="">
                <p>{{x.text}}</p>
              </div>
            </div>
<!--            <div class="swiper-slide">-->
<!--              <div v-for="x in funList" class="lifeIconBox" @click="jump(x.page)">-->
<!--                <img :src="x.src" alt="">-->
<!--                <p>{{x.text}}</p>-->
<!--              </div>-->
<!--            </div>-->
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
        </div>
      </div>
    </div>
    <!--  消息部分  -->
    <div class="msg" v-for="(item,index) in list" :key="index">
      <div class="msgHead">
        <div class="msg-h-l" @click="jump('lifeDynamic')">
          <p class="msg-h-tx"><img :src="item.avatar" alt="">
            <!--                  <img src="../../../../static/img/vip111.png" alt="">-->
          </p>
          <div class="msg-h-dj">
            <div class="msg-h-nick"><span>{{item.nickname}}</span></div>
            <p>我怎么这么可爱 | 10分钟前</p>
          </div>
        </div>
        <div v-if="item.headline_id != 0" class="follow" @click="follow">关注</div>
      </div>
      <div class="msg-txt" @click="jump('dynamic')">{{item.content}}</div>
      <div class="msg-img" @click="jump('dynamic')">
        <img v-for="img in item.image" :src="$store.state.imgurlApi+img" alt="">
      </div>
      <div class="msg-dz">
        <p><img src="../../../../static/img/tz1.png" alt=""><span>20</span></p>
        <p @click="jump('dynamic')"><img src="../../../../static/img/tz2.png" alt=""><span>85</span></p>
        <p><img src="../../../../static/img/tz4.png" alt=""><span>98</span></p>
      </div>
    </div>
  </div>
</template>

<script>
  import Swiper from "swiper";
  import "swiper/css/swiper.css";
  export default {
    name: "lifeIndex",
    data(){
      return {
        lunbolist: [{text: '', url: '../../../../static/img/lifebanner1.png'}, {text: '', url: '../../../../static/img/lifebanner1.png'}, {
          text: '',
          url: '../../../../static/img/lifebanner1.png'
        }],
        list:[],
        city:'西安财经',
        funList:[{text:'校园资讯',src:'../../../../static/img/shq1.png',page:'CampusInformation'},{text:'二手市场',src:'../../../../static/img/shq2.png',page:'secondHandMarket'},{text:'小兼职',src:'../../../../static/img/shq3.png',page:'partTimeJob'},{text:'兼职发布',src:'../../../../static/img/shq4.png',page:'postOfRelease'}]
      }
    },
    methods:{
      back(){
        this.$router.back();
      },
      handleCommand(command) {
        this.city = command;
      },
      jump(page){
        this.$router.push({
          name:page
        })
      }
    },
    created() {
      // //消息列表
      this.$myAxios('index/Classify/headline_consult', 'post',{
        headline_id:2,
      }).then(res => {
        if(res.data.state==1){
          console.log(res.data.headline_consult);
          this.list = res.data.headline_consult.data
        }
      });
    },
    mounted() {
      //    这里配置swiper轮播图
      new Swiper('.swiper-container', {
        loop: true, // 循环模式选项
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination'
        },
        autoplay:true
      });
      // new Swiper('.swiper-container2', {
      //   loop: true, // 循环模式选项
      //   // 如果需要分页器
      //   pagination: {
      //     el: '.swiper-pagination'
      //   }
      // });
    }
  }
</script>

<style scoped>
  .lifeIndex {
    width: 100%;
    box-sizing: border-box;
    padding-top: .5rem;
    min-height: 6.67rem;
    background-color: #F5F5F5;
    font-family:PingFang SC;
    padding-bottom: .1rem;
  }
  header {
    width: 100%;
    height: .5rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 88;
    background:linear-gradient(90deg,rgba(255,142,65,1) 0%,rgba(255,110,0,1) 100%);
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 .1rem 0 .13rem;
  }
  .backWrap {
    width: .2rem;
    height: .2rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: left;
  }
  .back {
    width: .1rem;
    height: .18rem;
  }
  .address {
    width: 1rem;
  }
  .search {
    width:2.2rem;
    height:.29rem;
    background:rgba(255,255,255,1);
    border-radius:.14rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    box-sizing: border-box;
    padding: 0 .15rem;
    font-size:.11rem;
    font-weight:500;
    color: #CDCBCB;
  }
  .search>img {
    width: .13rem;
    height: .13rem;
    margin-right: .1rem;
  }
  .sendTie>img {
    width: .18rem;
    height: .16rem;
  }
  .sendTie>span {
    font-size:.15rem;
    font-weight:500;
    color: #ffffff;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #ffffff;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  >>> .el-dropdown {
    font-size: .13rem!important;
  }
  >>> .el-icon-arrow-down {
    font-size: .12rem;
  }
  >>> .el-dropdown-menu__item {
    line-height: .36rem;
    padding: 0 .2rem;
    font-size: .14rem;
  }
  >>> .popper__arrow::after {
    top: .01rem;
    margin-left: -.06rem;
    border-top-width: 0;
    border-bottom-color: #FFF;
  }
  >>> .el-dropdown-link>span {
    display: inline-block;
    max-width: .8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 轮播图部分 */
  .index_lunbo {
    width: 100%;
    box-sizing: border-box;
    position: relative;
  }
  .index_swiper_listimg {
    width: 100%;
    height: 100%;
  }

/* 轮播图2 */
  .lifeIconBox {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: 25%;
  }
  .lifeIconBox>img {
    width: .44rem;
    height: .44rem;
    margin-bottom: .1rem;
  }
  .lifeIconBox>p {
    font-size:.12rem;
    font-weight:500;
    color: #333333;
  }
  .index_lunbo2 {
    background-color: #ffffff;
    width: 3.45rem;
    height:1.31rem;
    box-shadow:0 0 .08rem 0 rgba(121,121,121,0.42);
    border-radius:.05rem;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -.5rem;
    z-index: 9;
  }
  .zw {
    position: relative;
    width: 100%;
    height: .95rem;
  }
  .lunbo2,.swiper-slide {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-around;
  }

  .msg {
    width: 100%;
    box-sizing: border-box;
    padding: .15rem;
    background-color: #ffffff;
    margin-bottom: .1rem;
  }
  .msgHead {
    width: 100%;
    height: .32rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .15rem;
  }
  .msg-h-l {
    height: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .msg-h-tx {
    position: relative;
  }
  .msg-h-tx>img:nth-child(1) {
    width: .32rem;
    height: .32rem;
  }
  .msg-h-tx>img:nth-child(2) {
    width: .15rem;
    height: .15rem;
    position: absolute;
    right: -.06rem;
    bottom: -.01rem;
  }
  .msg-h-dj {
    height: 100%;
    display: flex;
    flex-flow: column;
    margin-left: .1rem;
    justify-content: space-between;
  }
  .msg-h-dj>p:nth-child(2) {
    font-size: .11rem;
    color: #999999;
    line-height: .11rem;
  }
  .msg-h-nick {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .msg-h-nick>p {
    width:.4rem;
    height:.14rem;
    background:rgba(255,142,73,1);
    border-radius:.07rem;
    font-size: .1rem;
    text-align: center;
    line-height: .14rem;
    color: #ffffff;
    margin-left: .1rem;
  }
  .msg-h-nick>span {
    font-size: .15rem;
    color: #333333;
    line-height: .15rem;
  }
  .follow {
    width:.5rem;
    height:.2rem;
    background:rgba(255,233,220,1);
    border-radius:.11rem;
    font-size: .12rem;
    color: #FF8E49;
    line-height: .2rem;
    text-align: center;
  }
  .msg-txt {
    font-size: .13rem;
    color: #666666;
    line-height: .18rem;
    margin-bottom: .1rem;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
  }
  .msg-img>img {
    width: 1.12rem;
    height: 1.12rem;
    margin-bottom: .05rem;
  }
  .msg-img {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin-bottom: .1rem;
  }

  .msg-bq {
    width:1.5rem;
    height:.3rem;
    background:rgba(242,242,242,1);
    border-radius:.15rem;
    color: #000000;
    font-size: .12rem;
    text-align: center;
    line-height: .3rem;
    margin-bottom: .1rem;
  }
  .msg-bq>span {
    color: #6F2EEE;
  }
  .msg-dz {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .msg-dz>p {
    display: flex;
    flex-flow: row;
    align-items: center;
  }
  .msg-dz>p>img {
    width: .17rem;
    margin-right: .05rem;
  }
  .msg-dz>p {
    font-size: 0;
  }
  .msg-dz>p>span {
    font-size: .12rem;
    color: #999999;
  }
</style>
